<template>
  <el-container>
    <el-header>
      <el-row :gutter="20" style="margin: 0">
        <el-col :span="6" :offset="18" class="learn-drawer-range-box-buttons">
          <el-button
            class="el-icon-check"
            type="text"
            @click="onSubmit"
            style="color: #67C23A;font-size:24px"
          />
          <el-button
            class="el-icon-close"
            type="text"
            @click="onClose"
            style="color: #F56C6C;font-size: 24px"
          />
        </el-col>
      </el-row>
    </el-header>
    <el-main style="padding: 0 20px">
      <!--搜索组件-->
      <search-form
        ref="searchForm"
        :url="{'getList':'/usercenter-admin/user/getListByQueryInfo','getscores':'/exam-admin/sta/exam/user'}"
        :setData="setData"
        :setLoading="setLoading"
        :setTotalPage="setTotalPage"
        :pagination="pagination"
        :scoreType="true"
        :examId="examId"
      />
      <!--列表-->
      <el-table
        :data="list"
        border
        max-height="600"
        :cell-style="{padding:'2px 0'}"
        :header-cell-style="{padding:'2px 0'}"
      >
        <el-table-column align="center" type="index" header-align="center" width="50px" label="序号" />
        <el-table-column prop="realname" header-align="center" align="center" label="姓名" />
        <el-table-column prop="deptName" header-align="center" align="center" label="部门" />
        <el-table-column header-align="center" align="center" label="考试时间">
          <template slot-scope="scope">{{scope.row.submitPaperTime ||'--'}}</template>
        </el-table-column>
        <el-table-column prop="examName" header-align="center" align="center" label="考试名称" />
        <el-table-column header-align="center" align="center" label="状态">
          <template slot-scope="scope">
<!--            {{parseInt(scope.row.isPass) === 0 ? '未及格':parseInt(scope.row.isPass)-->
<!--            === 1 ? '及格':parseInt(scope.row.isPass) === 2 ? '补考':'未参加'}}-->
            <span v-if="scope.row.joinExam === 0 && scope.row.isPass === 0">未参加</span>
            <span v-if="scope.row.joinExam === 0 && scope.row.isPass === null">未参加</span>
            <span v-if="scope.row.joinExam === 1 && scope.row.isPass === 0">未及格</span>
            <span v-if="scope.row.joinExam === 1 && scope.row.isPass === 1">及格</span>
            <span v-if="scope.row.joinExam === 1 && scope.row.isPass === 2">补考</span>
          </template>
        </el-table-column>
<!--        <el-table-column prop="isPass" header-align="center" align="center" label="是否及格">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag v-if="scope.row.ispass == 0 || scope.row.ispass == 2 || scope.row.ispass == 3">未及格</el-tag>-->
<!--            <el-tag v-else>已及格</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="score" header-align="center" align="center" label="分数">
          <template slot-scope="scope">{{isNaN(parseInt(scope.row.score)) ? '--':scope.row.score}}</template>
        </el-table-column>
      </el-table>
      <div
        style="display: flex;justify-content: space-between;align-items: center;margin-top: 20px"
      >
        <el-pagination
          @size-change="limitChange"
          @current-change="pageChange"
          :current-page="pagination.page"
          :page-sizes="[10, 20, 50]"
          :page-size="pagination.limit"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 0"
        ></el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import SearchForm from '../../../components/search-form/search-form'

export default {
  name: 'get-exam-grade',
  data() {
    return {
      examId: '',
      pagination: {
        page: 1,
        limit: 10
      },
      totalPage: 0,
      list: [],
      loading: false
    }
  },
  components: { SearchForm },
  props: {
    handleClose: Function,
    setLoading: Function
  },
  methods: {
    getExamId(id) {
      this.examId = id
      this.pagination = {
        page: 1,
        limit: 10
      }
      this.$nextTick(_ => {
        this.$refs.searchForm.init()
      })
    },
    // 每页数
    limitChange(val) {
      this.pagination = {
        limit: val,
        page: 1
      }
      this.$nextTick(_ => this.$refs.searchForm.search())
    },
    // 当前页
    pageChange(val) {
      this.pagination.page = val
      this.$nextTick(_ => this.$refs.searchForm.search())
    },
    setData(list) {
      this.list = list
    },
    setTotalPage(totalPage) {
      this.totalPage = totalPage
    },
    onClose() {
      this.handleClose()
    },
    onSubmit() {}
  }
}
</script>

<style scoped>
</style>
